<template>
  <a-layout-header class="admin-header">
    <icon
      name="MenuFoldOutlined"
      v-if="!collapsed"
      class="trigger"
      @click="handleCollapsed"
    />
    <icon
      name="MenuUnfoldOutlined"
      v-else
      class="trigger"
      @click="handleCollapsed"
    />
    <div class="menus">
      <a-dropdown>
        <div class="nav">
          <a-badge dot>
            <icon name="BellOutlined" />
          </a-badge>
        </div>
        <template #overlay>
          <div style="width: 300px; background-color: #fff" class="p-2">
            <a-list
              :split="true"
              size="small"
              item-layout="horizontal"
              :data-source="data"
            >
              <template #renderItem="{ item }">
                <a-list-item>
                  {{ item.title }}
                </a-list-item>
              </template>
            </a-list>
          </div>
        </template>
      </a-dropdown>

      <a-dropdown>
        <div class="nav">
          <a-avatar size="small">
            <template #icon>
              <icon name="UserOutlined" />
            </template>
          </a-avatar>
          {{ user.name }}
        </div>
        <template #overlay>
          <a-menu>
            <a-menu-item key="0">
              <router-link :to="{ name: 'CenterProfile' }">
                <icon name="UserOutlined" />
                个人信息
              </router-link>
            </a-menu-item>
            <a-menu-item key="1">
              <router-link :to="{ name: 'CenterProfile' }">
                <icon name="SettingOutlined" />
                个人设置
              </router-link>
            </a-menu-item>
            <a-menu-divider />
            <a-menu-item key="3" @click="logout">
              <icon name="LogoutOutlined" />
              退出登录
            </a-menu-item>
          </a-menu>
        </template>
      </a-dropdown>
    </div>
  </a-layout-header>
</template>
<script lang="ts">
import { useStore } from "vuex";
import { defineComponent } from "vue";
import { Icon } from "@/components";
import { Avatar, Layout, Dropdown, Menu, Badge, List } from "ant-design-vue";
import { IUserState } from "@/store/modules/user";

import { useAuth } from "@/hooks";

export default defineComponent({
  components: {
    Icon,
    AList: List,
    AListItem: List.Item,
    AListItemMeta: List.Item.Meta,
    ABadge: Badge,
    AMenu: Menu,
    AMenuItem: Menu.Item,
    AMenuDivider: Menu.Divider,
    AAvatar: Avatar,
    ALayout: Layout,
    ALayoutHeader: Layout.Header,
    ADropdown: Dropdown,
  },
  props: {
    collapsed: {
      required: true,
      type: Boolean,
    },
  },
  setup(props) {
    const store = useStore();
    const user: IUserState = store.state.user.user;

    const { logout } = useAuth();

    const handleCollapsed = (): void => {
      store.commit("app/setCollapsed", !props.collapsed);
    };
    const data = [
      {
        title: "Ant Design Title 1",
      },
      {
        title: "Ant Design Title 2",
      },
      {
        title: "Ant Design Title 3",
      },
      {
        title: "Ant Design Title 4",
      },
    ];
    return {
      data,
      user,
      logout,
      handleCollapsed,
    };
  },
});
</script>
<style lang="less" scoped>
.ant-layout-header {
  line-height: 48px;
}
.admin-header {
  height: 48px;
  background: #fff;
  padding-left: 0;
  display: flex;
  justify-content: space-between;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  .nav {
    padding: 0 14px;
    display: flex;
    align-items: center;
    .ant-avatar {
      margin-right: 6px;
    }
  }
  .nav:hover {
    background-color: rgba(0, 0, 0, 0.025);
    cursor: pointer;
  }

  .trigger {
    font-size: 18px;
    line-height: 48px;
    padding: 0 24px;
    cursor: pointer;
    transition: color 0.3s;
  }
  .trigger:hover {
    color: #1890ff;
  }

  .menus {
    display: flex;
  }
}
</style>
